<template>
	<view class="content">
		<view class="form">
			<view class="item">
				<view class="title">头像选择</view>
				<view class="avatar" @click="uploadImgs">
					<view class="imgbox">
						<image class="store" v-if="pictureData" :src="pictureData"></image>
						<view v-else class="add"> + </view>

					</view>
					<view class="text">上传店铺头像</view>
				</view>
			</view>
			<view class="item">
				<view class="title">店名</view>
				<input class="input" placeholder="请输入店铺名称" v-model="name" maxlength="20">
			</view>
			<view class="item">
				<view class="title">加微</view>
				<input class="input" placeholder="请输入加微" v-model="wxNumber">
			</view>
			<view class="item">
				<view class="title">手机号</view>
				<input class="input" placeholder="请输入手机号" v-model="mobile" maxlength="11" type="number">
			</view>
			<view class="item">
				<view class="title">定位地址</view>

				<view class="address" @click="location">
					<text v-show="!addr">请选择</text>
					<!--                  <text >{{form.addr?form.addr:"请选择"}}</text>-->
					<text>{{addr}}</text>

					<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/arrow_right2.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="title">活动期限</view>
				<view class="timebox">
					<!-- <image class="time-img" src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/time.png"></image>-->
					<!-- <view class="time">2022-12-12 12:00:00</view>-->
					<!-- <view class="text">至</view>-->
					<!-- <view class="time">2022-12-12 12:00:00</view>-->
					<view>
						<picker mode="date" :value="startDate" @change="bindDateChange">
							<view class="uni-input">{{startDate}}</view>
						</picker>
					</view>
					<!-- <view>
                    <picker mode="time" :value="startTime"  @change="bindTimeChange">
                      <view class="uni-input">{{startTime}}</view>
                    </picker>
                  </view> -->
					<view class="text">至</view>

					<view>
						<picker mode="date" :value="endDate" @change="endBindDateChange">
							<view class="uni-input">{{endDate}}</view>
						</picker>
					</view>
					<!--                  <view>
                    <picker mode="time" :value="endTime"   @change="endBindTimeChange">
                      <view class="uni-input">{{endTime}}</view>
                    </picker>
                  </view> -->


				</view>
			</view>
			<view class="item">
				<view class="title">图片上传<text>(非必填)</text></view>

				<view class="imglist">
					<view class="item" v-for="(item,index) in pictureList" :key="index">
						<image class="icon" :src="item" mode="aspectFill"></image>
						<image class="remove" src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/close.png"
							@click="removePictureClick(index)"></image>
						<!--<text>本地上传</text>-->
					</view>
					<view class="item" @click="addPictureClick">
						<image class="icon" src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/add.png"></image>
						<!--<text>本地上传</text>-->
					</view>
				</view>
			</view>

			<view class="item" style="border-bottom: none;">
				<view class="title">活动内容</view>
				<textarea class="textarea" v-model="content" placeholder="请输入活动内容"></textarea>
			</view>
		</view>

		<view class="btn" @click="save">确认发布</view>

		<uni-popup class="addMedicine-popup" ref="picturePopup" type="bottom"
			mask-background-color="rgba(0, 0, 0, 0.6)">
			<view class="addMedicine-content">
				<view class="picturePopup-list">
					<view class="picturePopup-item" v-for="(item, index) in sourceType" :key="index"
						@click="pictureClick(item, index)">
						{{ item.title }}
					</view>
				</view>
			</view>
		</uni-popup>



		<uni-popup class="addMedicine-popup" ref="addPicturePopup" type="bottom"
			mask-background-color="rgba(0, 0, 0, 0.6)">
			<view class="addMedicine-content">
				<view class="picturePopup-list">
					<view class="picturePopup-item" v-for="(item, index) in sourceType" :key="index"
						@click="addPictureClick(item, index)">
						{{ item.title }}
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: null,
				wxNumber: "",
				mobile: "",
				content: "",
				sourceType: [{
						type: 'camera',
						title: '拍照',
					},
					{
						type: 'album',
						title: '相册',
					},
					{
						type: 'cancel',
						title: '取消',
					},
				],
				pictureList: [],
				pictureData: "",
				form: {
					name: "",
					content: "",
					wxNumber: "",
					mobile: ""

				},
				startTime: "00:00",
				endTime: "23:59",
				startDate: "2023-01-01",
				endDate: "2023-12-30",
				addr: "",
				locationData: null,
				id: null,
			}
		},
		watch: {
			addr: {
				handler(val) {
					console.log("123")
					this.addr = val
				},
				immediate: true,
				deep: true,
			},
			pictureList: {
				handler(val) {
					console.log("123")
					this.pictureList = val
				},
				immediate: true,
				deep: true,
			},

			pictureData: {
				handler(val) {
					this.pictureData = val
				},
				immediate: true,
				deep: true,
			}
		},
		onLoad(item) {
			if (item.id) {
				this.getInfo(item.id)
			}
		},
		methods: {
			uploadImgs() {
				let that = this
				// this.$refs.addPicturePopup.open()
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						wx.cropImage({
							src: res.tempFilePaths[0], // 图片路径
							cropScale: '1:1', // 裁剪比例
							success: (res) => {
								uni.uploadFile({
									url: that.$api.uploadImg, //仅为示例，非真实的接口地址
									filePath: res.tempFilePath,
									name: 'file',
									success: (res) => {
										console.log(res);
										let da = JSON.parse(res.data);
										that.pictureData = da.url
									}
								});
							}
						})
					}
				})
			},
			bindTimeChange(res) {
				this.startTime = res.detail.value

			},
			bindDateChange(res) {
				console.log(res)
				this.startDate = res.detail.value
			},
			endBindTimeChange(res) {
				this.endTime = res.detail.value

			},
			endBindDateChange(res) {
				this.endDate = res.detail.value

			},
			getInfo(id) {
				this.$api.request({
					url: this.$api.addActivity + "/" + id,
				}).then(res => {
					this.id = res.data.id
					this.startTime = res.data.startTime
					this.endTime = res.data.endTime
					this.startDate = res.data.startDate;
					this.endDate = res.data.endDate;
					this.pictureList = res.data.list
					this.locationData = {}
					this.locationData.lat = res.data.latitude
					this.locationData.longitude = res.data.longitude
					this.content = res.data.content;
					this.pictureData = res.data.img
					this.addr = res.data.addr
					this.mobile = res.data.mobile;
					this.wxNumber = res.data.wxNumber;
					this.name = res.data.name;
				})
			},
			location() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						that.addr = res.address
						that.locationData = res
					}
				});
			},
			save() {
				if (!this.addr) {
					uni.showToast({
						title: '选择地址',
						duration: 2000,
						icon: "error"
					});
					return
				}
				if (!this.name) {
					uni.showToast({
						title: '填写店铺名称',
						duration: 2000,
						icon: "error"

					});
					return

				}
				if (!this.mobile) {
					uni.showToast({
						title: '填写手机',
						duration: 2000,
						icon: "error"

					});
					return

				}
				if (!this.wxNumber) {
					uni.showToast({
						title: '填写加微',
						duration: 2000,
						icon: "error"

					});
					return

				}
				if (!this.pictureData) {
					uni.showToast({
						title: '上传头像',
						duration: 2000,
						icon: "error"

					});
					return

				}
				if (!this.content) {
					uni.showToast({
						title: '填写活动内容',
						duration: 2000,
						icon: "error"
					});
					return

				}
				this.form.startTime = this.startTime;

				this.form.endTime = this.endTime;
				this.form.startDate = this.startDate;
				this.form.endDate = this.endDate;
				this.form.addr = this.addr
				this.form.imgList = JSON.stringify(this.pictureList)
				this.form.img = this.pictureData
				if (this.locationData) {
					this.form.lat = this.locationData.latitude
					this.form.longitude = this.locationData.longitude
				}
				this.form.content = this.content;
				this.form.mobile = this.mobile;
				this.form.wxNumber = this.wxNumber;
				this.form.name = this.name;
				let method = "post";

				if (this.id) {
					this.form.id = this.id
					method = "PUT"
					this.form.status = 1

				}
				this.$api.request({
					url: this.$api.addActivity,
					method: method,
					data: this.form
				}).then(res => {
					uni.showToast({
						title: '成功',
						duration: 2000,
					});

					uni.navigateBack()
				})


			},
			open() {

			},
			pictureClick(item, index) {
				this.$refs.picturePopup.close()
				if (item && item.type) {
					this.chooseImage(item)
				}
			},
			chooseImage(obj) {
				if (obj.type === 'cancel') {
					this.$refs.picturePopup.close()

					return
				}
				let that = this
				let sourceType = ['camera']
				if (obj && obj.type == 'album') {
					sourceType = ['album']
				}
				let pictureList = [...this.pictureList]
				if (pictureList.length >= 9) {
					uni.showToast({
						title: '最多9张图片',
						duration: 2000
					});
					return;
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['camera', 'album'],
					success: (res) => {
						if (res && res.tempFilePaths && res.tempFilePaths.length) {
							uni.uploadFile({
								url: that.$api.uploadImg, //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'file',
								success: (res) => {
									console.log(res);
									let da = JSON.parse(res.data);
									console.log(da);

									that.pictureData = da.url
								}
							});


							console.log(that.pictureData)
						}
					}
				})
			},
			addPictureClick(obj) {
				console.log(obj)
				let that = this
				let pictureList = [...this.pictureList]
				if (pictureList.length >= 9) {
					uni.showToast({
						title: '最多9张图片',
						duration: 2000
					});
					return;
				}
				let mediaType = ['image']
				uni.chooseMedia({
					count: 9,
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					mediaType: mediaType,
					success: (res) => {
						console.log(res)
						if (res && res.tempFiles && res.tempFiles.length) {
							res.tempFiles.forEach(item => {
								uni.uploadFile({
									url: that.$api.uploadImg, //仅为示例，非真实的接口地址
									filePath: item.tempFilePath,
									name: 'file',
									success: (res) => {
										console.log(res.data.url);
										pictureList.push(
											JSON.parse(res.data).url,
										)
										that.pictureList = [...pictureList]
									}
								});
							})


						}

					}
				})
			},
			removePictureClick(index) {
				this.pictureList.splice(index, 1)
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "@/static/css/app.less";

	.content {
		min-height: 100vh;
		background-color: #fff;
		// padding-bottom: 100rpx;

		.form {
			padding: 30rpx;

			.item {
				margin-top: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #ECECEC;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.avatar {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.imgbox {
						height: 100rpx;
						width: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: @radius;
						border: 1rpx solid #b9b9b9;

						.store {
							height: 100%;

						}

						.add {
							font-size: 48rpx;
							font-weight: bolder;
							color: #BBBBBB;
						}
					}

					.text {
						font-size: 32rpx;
						margin-left: 20rpx;
					}
				}

				.input {
					margin-top: 20rpx;
					font-size: 32rpx;
				}

				.address {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;

					text {
						font-size: 32rpx;
					}

					image {
						height: 30rpx;
						width: 30rpx;
					}
				}

				.timebox {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1rpx solid #b9b9b9;
					border-radius: 8rpx;
					margin-top: 20rpx;
					padding: 20rpx;

					.time-img {
						height: 30rpx;
						width: 30rpx;
					}

					.time {
						font-size: 26rpx;
						color: #606266;
					}

					.text {
						font-size: 26rpx;
						color: #606266;
					}
				}

				.textarea {
					width: 650rpx;
					border: 1rpx solid #b9b9b9;
					border-radius: @radius;
					margin-top: 20rpx;
					font-size: 32rpx;
					padding: 20rpx;
				}

				.imglist {
					display: flex;
					flex-wrap: wrap;

					.item {
						height: 100rpx;
						width: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-radius: @radius;
						position: relative;
						//border: 1rpx solid #b9b9b9;

						.icon {
							height: 100%;
							width: 100%;
							border-radius: @radius;

						}

						.remove {
							width: 20px;
							position: absolute;
							top: -5px;
							right: -5px;
							height: 20px;
						}

						text {
							font-size: 18rpx;
							color: #1A1A1A;
						}
					}
				}
			}
		}

		.picturePopup {
			&-list {
				width: 100%;
				overflow: hidden;
				background-color: #f8f8f8;
			}

			&-item {
				width: 100%;
				overflow: hidden;
				background-color: #fff;
				margin-bottom: 10rpx;
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #333;
				font-family: 'PingFangSC';
			}
		}

		.btn {
			width: 750rpx;
			text-align: center;
			color: #fff;
			background-color: #07C160;
			padding: 40rpx 0;
		}
	}
</style>